<!--
 * @Descripttion:
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-03 09:53:38
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-23 15:53:06
-->
<template>
	<div class="common-nav">
		<div class="common-nav-box">
			<div class="common-menu" @mouseenter="showMenuEvent" @mouseleave="leaveMenu">
				<div class="common-menu-item" @click="changeMenu(0)">
					<!-- <i class="iconfont icon iconshouquancaidan"></i> -->
					<!-- <i class="el-icon-notebook-2"></i> -->
					<i class="el-icon-menu" style="position: absolute;top: 12px;left:30px;"></i>
					<span class="title" style="margin-left: 40px;">全部商品分类</span>
				</div>
				<!--          <div class="common-menu-item" :class="{isAction: itemType === 0}" @click="changeMenu(0)" @mouseenter="mouseenterChangeMenu(0)" @mouseleave="getMenuListFn()">办公用品</div>-->
				<!--          <div class="common-menu-item" :class="{isAction: itemType === 1}" @click="changeMenu(1)" @mouseenter="mouseenterChangeMenu(1)" @mouseleave="getMenuListFn()">工业用品</div>-->
				<ul class="common-menu-down" v-show="menuFlag">
					<li class="common-menu-down-item" :class="{'on':item==selItem}" v-for="(item,index1) in manuList"
						@mouseenter="enterMenu(item)" :key="index1">
						<router-link
							:to="{path:'/newSearch', query:{primaryCategory:cur.id,categoryName:cur.categoryName,level:1,hasCate:1}}"
							target="_blank" v-for="(cur,index) in item" :key="cur.id">
							<span
								:class="{'after':index+1<item.length}">{{cur.categoryName.replace("、","").replace("/","").replace("/","").replace("/","")}}</span>
						</router-link>
					</li>
				</ul>
				<div class="common-menu-extant" v-if="showExtant" @mouseenter="showMenu23">
					<el-scrollbar style="height:100%">
						<div class="extant-header set-flex" style="display: none;">
							<router-link class="extant-header-item"
								:to="{path:'/newSearch', query:{primaryCategory:cur.id,categoryName:cur.categoryName,level:2,hasCate:1}}"
								target="_blank" v-for="cur in menuList23" :key="cur.id">
								<span>{{cur.categoryName}}</span>
								<i class="el-icon-arrow-right"></i>
							</router-link>
						</div>
						<div class="extant-row set-flex" v-for="item in menuList23" :key="item.id">
							<div class="extant-row-title">
								<router-link
									:to="{path:'/newSearch', query:{primaryCategory:item.id,categoryName:item.categoryName,level:2,hasCate:1}}"
									target="_blank">
									{{item.categoryName}}
									<i class="el-icon-arrow-right"></i>
								</router-link>
							</div>
							<div class="extant-row-body">
								<router-link class="extant-item"
									:to="{path:'/newSearch', query:{primaryCategory:cur.id,categoryName:cur.categoryName,level:3,hasCate:1}}"
									target="_blank" v-for="cur in item.navChildDto" :key="cur.id">
									<span>{{cur.categoryName}}</span>
								</router-link>
							</div>
						</div>
					</el-scrollBar>
				</div>
			</div>
			<div class="nav-list">
				<a class="nav-list-item" @click="goNav(item,index)" v-for="(item,index) in navList" :key="item.id"
					:class="index == currentNav?'currentNav':''">
					<div>{{item.name}}</div>
					<ul class="nav-down" v-if="item.children">
						<li class="nav-down-item" v-for="cur in item.children" :key="cur.id">
							<a @click="goNav2(cur,index)" target="_blank" class="uni-ellipsis" :title="cur.optional4">
								{{cur.optional1}}
							</a>
						</li>
					</ul>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMenuList,
		getMenuList23
	} from '@/api/mall.api.js'
	export default {
		name: 'common-nav',
		props: {
			hideMenu: {
				type: Boolean,
				default: false
			},
			isHome: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 办公用品 0 ，工业用品 1
				itemType: 0,
				currentNav: '',
				navList: [{
						name: '首页',
						path: '/',
						currentNav: '',
					},
					{
						name: '优采自营',
						path: '/newSearch?name=优采自营',
						currentNav: 1,
					},
					{
						name: '加盟电商',
						path: '/',
						path: '/newSearch?supplierId=02f9801c6f3f48359feb9efa4be9f968,3a2f3e135008486398c85ebed1a2002e,ec47cd1e10f511e6b2f6286ed488c861,25c53d6a2ad343e2ae9df5e2600e1005,0e2917efe5cb40d8ae25c3c8c4fa0d54,a7cbc3c6abbf4a75a829d969aa6c06a0,1a5ded11aecf4f9fad891a608846ff86,9537dcb171404d4b84dcf87a8ece286c,dec316362911409ea5ef491bcbdb9438,c925e0ba59f94c1e9468e408e9c9f106,38b67f6db3cc4f59bfa7953349d8c5a9&name=加盟电商',
						currentNav: 2,
					},
					{
						name: '办公用品',
						path:"/newSearch?level=2&name=办公用品&primaryCategory=e28715cb54a511ebace0fa163ecbc11e,e286d2a654a511ebace0fa163ecbc11e,e286d31a54a511ebace0fa163ecbc11e,e286d1b154a511ebace0fa163ecbc11e,e286d02454a511ebace0fa163ecbc11e",
						currentNav: 3,
					},
					{
						name: '党群团购',
						path: '/newSearch?supplierId=8ea9de18643811ea84f00628c0001242,1c9e1c8779df4aaf8ad2771eb100e84a,4525cb26d88a11eb9494005056c00001,c1bd778cb10940068be11b16513b961f,b11ab91817e14dd6a71f9a0dacda22f5,642bff47ea904d8282007ce1d2928efa&name=党群团购',
						currentNav: 4,
					},
					{
						name: '子企业',
						path: '/newSearch?name=子企业&supplierId=1c9e1c8779df4aaf8ad2771eb100e84a,8ea9de18643811ea84f00628c0001242,452605a6d88a11eb9494005056c00001,366cd86c54d811e896ad0628c0001242,0bf99fd64813480fa637423005cdda52,d40c61ce89784470b320bcbae8866f64,4525cb26d88a11eb9494005056c00001',
						currentNav: 5,
					},
					{
						name: '消费帮扶',
						path: '/newSearch?currentNav=6&name=消费帮扶',
						currentNav: 6,
					},
					{
						name: '防疫物资',
						path: '/newSearch?currentNav=7&name=防疫物资',
						currentNav: 7,
					}
				],
				// 显示左侧菜单
				menuFlag: true,
				// 菜单
				manuList: [],
				// 选中的菜单
				selItem: '',
				menuList23: [],
				// 显示具体分类
				showExtant: false
			}
		},
		created() {
			this.getMenuListFn()
			this.menuFlag = !this.hideMenu

			var currentNav = localStorage.getItem("currentNav");
			this.currentNav = currentNav;
			// if (currentNav && currentNav != "undefined") {
			// 	localStorage.setItem("currentNav", currentNav);
			// 	this.currentNav = currentNav;
			// } else {
			// 	this.currentNav = 0;
			// 	localStorage.setItem("currentNav", 0);
			// }

		},
		mounted() {
			// var currentNav = this.$route.query;
			// localStorage.setItem("currentNav", currentNav);
			// this.currentNav = currentNav;
		},
		methods: {
			goNav2(item, index) {
				if (index == 0) {
					this.$router.push({
						path: item.optional2,
					})
				} else {
					this.$router.push({
						path: item.optional2,
						query: {
							index: index
						}
					})
				}
			},
			goNav(item, index) {
				// console.log(item);
				// localStorage.removeItem("currentNav");
				// localStorage.setItem("currentNav", index);
				// this.currentNav = index;
				if (item.children) {
					return;
				}
				if (item.name == '值采工业') {
					window.open('https://mro.ansteelscm.com/mall-cli-portal/static/pages/index/index.html#index/index');
				} else {
					if (index == 0) {
						this.$router.push({
							path: item.path
						})
					} else {
						this.$router.push({
							path: item.path,
							query: {
								index: index
							}
						})
					}
				}
			},
			// 页面获取菜单
			getMenuListFn() {
				var that = this;
				getMenuList({
					itemType: this.itemType
				}).then(res => {
					that.manuList = res
				})
			},
			// 鼠标移入事件
			mouseenterChangeMenu(type) {
				getMenuList({
					itemType: type
				}).then(res => {
					this.manuList = res
				})
			},
			// 切换菜单
			changeMenu(val) {
				this.itemType = val
			},
			// 进入菜单
			enterMenu(item) {
				this.selItem = item
				this.menuList23 = []
				const ids = []
				item.forEach(cur => {
					ids.push(cur.id)
				})
				//  获取2，3级菜单
				getMenuList23({
					itemids: ids.toString()
				}).then(res => {
					this.menuList23 = res
				})
				this.showMenu23()
			},
			//  显示右侧2，3级菜单
			showMenu23() {
				if (this.hideMenu) {
					this.menuFlag = true
				}
				this.showExtant = true
			},
			// 离开菜单
			leaveMenu() {
				if (this.hideMenu) {
					this.menuFlag = false
				}
				this.showExtant = false
				setTimeout(() => {
					if (!this.showExtant) {
						this.selItem = ''
					}
				}, 200)
			},
			// 显示菜单
			showMenuEvent() {
				if (this.hideMenu) {
					this.menuFlag = true
				}
			},
			// 隐藏菜单
			hideMenuEvent() {
				if (this.hideMenu) {
					this.menuFlag = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.common-nav {
		background: $--color-primary;
		width: 100%;
		min-width: 1200px;

		&-box {
			display: flex;
			width: 1200px;
			height: 40px;
			background: transparent;
			margin: 0 auto;

			// 左侧菜单
			.common-menu {
				position: relative;
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 20px;
				background: $--color-primary;

				&-item {
					width: 250px;
					height: 100%;
					padding: 0 18px;
					box-sizing: border-box;
					cursor: pointer;
					line-height: 40px;
					background: #333;

					.icon {
						font-size: 24px !important;
						vertical-align: middle;
					}

					.title {
						padding-left: 10px;
						vertical-align: middle;
					}
				}

				&-down {
					position: absolute;
					top: 100%;
					left: 0;
					padding: 0;
					height: 21.9vw;
					width: 250px;
					color: #fff;
					overflow-x: hidden;
					overflow-y: auto;
					font-size: 16px;
					background: rgba(0, 0, 0, 0.8);
					z-index: 200;

					&-item {
						margin-left: 14px;
						padding: 8px 0px 8px 8px;
						cursor: pointer;

						&:hover,
						&.on {
							background: #FBFBFB;
							color: $--color-primary;

							a {
								font-weight: 600;
								color: $--color-primary;
							}
						}

						a {
							color: #fff;

							.after:after {
								// content: "/";
								content: "";
								margin: 0 4px;
								font-weight: normal;
								color: #606266;
							}
						}
					}
				}

				// 右下
				&-extant {
					position: absolute;
					top: 40px;
					left: 250px;
					padding: 20px;
					width: 970px;
					height: 21.9vw;
					background: #FBFBFB;
					box-sizing: border-box;
					// border: 1px solid $--color-primary;
					z-index: 2001;
				}
			}

			// 右侧导航
			.nav-list {
				display: flex;
				padding: 0 18px;
				height: 100%;
				width: 100%;
				position: relative;

				&-item {
					position: relative;
					display: flex;
					align-items: center;
					padding: 0 16px;
					height: 100%;
					font-size: 18px;
					color: #fff;
					box-sizing: border-box;
					cursor: pointer;

					// 子级下拉
					.nav-down {
						display: none;
						position: absolute;
						top: 41px;
						left: 0;
						padding: 12px 8px;
						min-width: 110px;
						max-width: 176px;
						max-height: 335px;
						overflow-y: auto;
						font-size: 18px;
						background: #ffffff;
						border-radius: 4px;
						box-shadow: 1px 0 10px rgba(0, 0, 0, .1);
						z-index: 2001;

						&-item {
							padding: 8px 5px;

							a {
								display: block;
								color: #606266;
								width: 100%;
								height: 100%;
							}

							&:hover {
								background: $--color-primary;
							}
						}
					}

					&:hover {
						color: #fff;
						background: #333;
						font-weight: bold;

						.nav-down {
							display: block;
						}
					}
				}
			}
		}

		.common-nav-box .nav-list-item .nav-down-item:hover a {
			color: #fff !important;
		}

		// 2，3级菜单 顶部
		.extant-header {
			font-size: 14px;
			flex-wrap: wrap;

			&-item {
				margin-right: 10px;
				margin-bottom: 10px;
				background: $--color-primary;

				span {
					display: inline-block;
					padding: 3px 5px;
					color: #fff;
				}

				i {
					color: #fff;
				}

				&:hover {
					background: $--color-danger;
				}

			}
		}

		// 2，3级菜单
		.extant-row {
			color: #606266;
			font-size: 14px;

			&-title {
				font-weight: 600;
				flex-shrink: 0;
				padding: 6px 0;

				a {
					color: $--color-primary;

					&:hover {
						color: $--color-danger;
					}
				}
			}

			&-body {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				padding-top: 6px;
				margin: 0 10px;
				border-bottom: 1px solid #e0e0e0;

				.extant-item {
					color: #606266;
					border-left: 1px solid #e0e0e0;
					padding: 0 10px;
					margin-bottom: 8px;

					&:hover {
						color: $--color-danger;
					}
				}
			}
		}
	}

	.isAction {
		background-color: #193d82;
	}
</style>

<style lang="scss">
	.common-nav {
		.el-scrollbar__wrap {
			overflow-x: hidden;
		}
	}

	// .common-nav-box .common-menu-down{
	// 	height: 544px !important;
	// }
	.common-menu-down-item span {
		font-size: 15px;
	}

	.currentNav {
		color: #fff;
		font-weight: bold;
		background: #333;
	}




	// .nav-list a:last-child{
	// 	color: blue;
	// }
</style>
